---
{
	"title": "Formulaire à étapes",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Converti automatiquement un formulaire en étapes.",
	"tag": "stepsform",
	"parentdir": "stepsform",
	"altLangPrefix": "stepsform",
	"dateModified": "2025-08-04"
}
---
<section>
	<h2>But</h2>
	<p>Offre la possibilité de diviser un formulaire en différentes étapes (sans ou avec validation de formulaire).</p>
</section>

<section>
	<h2>Exemple pratique</h2>

	<div class="wb-frmvld wb-steps">
		<form action="#" method="get" id="steps-example">
			<fieldset id="client">
				<legend>Informations du client</legend>
				<div>
					<div class="form-group">
						<label for="firstname" class="required"><span class="field-name">Prénom</span></label>
						<input class="form-control" id="firstname" name="firstname" type="text" data-rule-minlength="2" required="required">
					</div>
					<div class="form-group">
						<label for="lastname" class="required"><span class="field-name">Nom de famille</span></label>
						<input class="form-control" id="lastname" name="lastname" type="text" data-rule-minlength="2" required="required">
					</div>
					<div class="form-group">
						<label for="dateOfBirth" class="required"><span class="field-name">Date de naissance</span><span class="datepicker-format"> (<abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span></label>
						<input class="form-control" id="dateOfBirth" name="dateOfBirth" type="date" required="required">
					</div>
				</div>
			</fieldset>
			<fieldset id="contact">
				<legend>Informations de contact</legend>
				<div>
					<div class="form-group">
						<label for="preferredNumber" class="required">Principal&nbsp;: <span class="field-name">Numéro de téléphone</span></label>
						<input class="form-control" id="preferredNumber" name="preferredNumber" type="tel" data-rule-phoneUS="true" required="required">
					</div>
					<div class="form-group">
						<label for="secondaryNumber">Secondaire&nbsp;: <span class="field-name">Numéro de téléphone</span></label>
						<input class="form-control" id="secondaryNumber" name="secondaryNumber" type="tel" data-rule-phoneUS="true">
					</div>
					<div class="form-group">
						<label for="email"><span class="field-name">Adresse courriel</span> (test@domaine)</label>
						<input class="form-control" id="email" name="email" type="email">
					</div>
				</div>
			</fieldset>
			<fieldset id="questionaire">
				<legend>Questionnaire éthique</legend>
				<div>
					<small>Pour chacun des exemples suivants, indiquez si vous sentez qu'il s'agit d'un cas de problème éthique ou pas.</small>
					<fieldset class="subfields">
						<legend><span class="field-name">Exemple 1</span>: Vous payez 10,00&nbsp;$ pour un achat, mais vous recevez de la monnaie comme s'il s'agissait de 20,00&nbsp;$. Garderiez vous la monnaie en surplus?</legend>
						<div class="radio">
							<label for="defNot-1"><input type="radio" name="ethics1" value="defNot-1" id="defNot-1">&#160;Absolument pas</label>&#160;
							<label for="probNot-1"><input type="radio" name="ethics1" value="probNot-1" id="probNot-1">&#160;Probablement pas</label>&#160;
							<label for="maybe-1"><input type="radio" name="ethics1" value="maybe-1" id="maybe-1">&#160;Peut-être (Incertain)</label>&#160;
							<label for="probably-1"><input type="radio" name="ethics1" value="probably-1" id="probably-1">&#160;Probablement</label>&#160;
							<label for="definitely-1"><input type="radio" name="ethics1" value="definitely-1" id="definitely-1">&#160;Définitivement</label>
						</div>
					</fieldset>
					<fieldset class="subfields">
						<legend><span class="field-name">Exemple 2</span>: Vous avez besoin d'un logiciel, mais vous ne pouvez pas attendre que la gestion prenne cette décision. Le téléchargeriez-vous sans avoir de licence?</legend>
						<div class="radio">
							<label for="defNot-2"><input type="radio" name="ethics2" value="defNot-2" id="defNot-2">&#160;Absolument pas</label>&#160;
							<label for="probNot-2"><input type="radio" name="ethics2" value="probNot-2" id="probNot-2">&#160;Probablement pas</label>&#160;
							<label for="maybe-2"><input type="radio" name="ethics2" value="maybe-2" id="maybe-2">&#160;Peut-être (Incertain)</label>&#160;
							<label for="probably-2"><input type="radio" name="ethics2" value="probably-2" id="probably-2">&#160;Probablement</label>&#160;
							<label for="definitely-2"><input type="radio" name="ethics2" value="definitely-2" id="definitely-2">&#160;Définitivement</label>
						</div>
					</fieldset>
				</div>
			</fieldset>
			<input type="submit" name="submit" value="Soumettre" class="btn btn-primary">
		</form>
	</div>

	<details class="mrgn-tp-md mrgn-bttm-md">
		<summary>Visualiser le code</summary>
		<pre><code>&lt;section&gt;
	&lt;h2&gt;Exemple pratique&lt;/h2&gt;

	&lt;div class="wb-frmvld wb-steps"&gt;
		&lt;form action="#" method="get" id="steps-example"&gt;
			&lt;fieldset id="client"&gt;
				&lt;legend&gt;Informations du client&lt;/legend&gt;
				&lt;div&gt;
					&lt;div class="form-group"&gt;
						&lt;label for="firstname" class="required"&gt;&lt;span class="field-name"&gt;Prénom&lt;/span&gt;&lt;/label&gt;
						&lt;input class="form-control" id="firstname" name="firstname" type="text" data-rule-minlength="2" required="required"&gt;
					&lt;/div&gt;
					&lt;div class="form-group"&gt;
						&lt;label for="lastname" class="required"&gt;&lt;span class="field-name"&gt;Nom de famille&lt;/span&gt;&lt;/label&gt;
						&lt;input class="form-control" id="lastname" name="lastname" type="text" data-rule-minlength="2" required="required"&gt;
					&lt;/div&gt;
					&lt;div class="form-group"&gt;
						&lt;label for="dateOfBirth" class="required"&gt;&lt;span class="field-name"&gt;Date de naissance&lt;/span&gt;&lt;span class="datepicker-format"&gt; (&lt;abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour"&gt;AAAA-MM-JJ&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;
						&lt;input class="form-control" id="dateOfBirth" name="dateOfBirth" type="date" required="required"&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/fieldset&gt;
			&lt;fieldset id="contact"&gt;
				&lt;legend&gt;Informations de contact&lt;/legend&gt;
				&lt;div&gt;
					&lt;div class="form-group"&gt;
						&lt;label for="preferredNumber" class="required"&gt;Principal&nbsp;: &lt;span class="field-name"&gt;Numéro de téléphone&lt;/span&gt;&lt;/label&gt;
						&lt;input class="form-control" id="preferredNumber" name="preferredNumber" type="tel" data-rule-phoneUS="true" required="required"&gt;
					&lt;/div&gt;
					&lt;div class="form-group"&gt;
						&lt;label for="secondaryNumber"&gt;Secondaire&nbsp;: &lt;span class="field-name"&gt;Numéro de téléphone&lt;/span&gt;&lt;/label&gt;
						&lt;input class="form-control" id="secondaryNumber" name="secondaryNumber" type="tel" data-rule-phoneUS="true"&gt;
					&lt;/div&gt;
					&lt;div class="form-group"&gt;
						&lt;label for="email"&gt;&lt;span class="field-name"&gt;Adresse courriel&lt;/span&gt; (test@domaine)&lt;/label&gt;
						&lt;input class="form-control" id="email" name="email" type="email"&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/fieldset&gt;
			&lt;fieldset id="questionaire"&gt;
				&lt;legend&gt;Questionnaire éthique&lt;/legend&gt;
				&lt;div&gt;
					&lt;small&gt;Pour chacun des exemples suivants, indiquez si vous sentez qu'il s'agit d'un cas de problème éthique ou pas.&lt;/small&gt;
					&lt;fieldset class="subfields"&gt;
						&lt;legend&gt;&lt;span class="field-name"&gt;Exemple 1&lt;/span&gt;: Vous payez 10,00&nbsp;$ pour un achat, mais vous recevez de la monnaie comme s'il s'agissait de 20,00&nbsp;$. Garderiez vous la monnaie en surplus?&lt;/legend&gt;
						&lt;div class="radio"&gt;
							&lt;label for="defNot-1"&gt;&lt;input type="radio" name="ethics1" value="defNot-1" id="defNot-1"&gt;&#160;Absolument pas&lt;/label&gt;&#160;
							&lt;label for="probNot-1"&gt;&lt;input type="radio" name="ethics1" value="probNot-1" id="probNot-1"&gt;&#160;Probablement pas&lt;/label&gt;&#160;
							&lt;label for="maybe-1"&gt;&lt;input type="radio" name="ethics1" value="maybe-1" id="maybe-1"&gt;&#160;Peut-être (Incertain)&lt;/label&gt;&#160;
							&lt;label for="probably-1"&gt;&lt;input type="radio" name="ethics1" value="probably-1" id="probably-1"&gt;&#160;Probablement&lt;/label&gt;&#160;
							&lt;label for="definitely-1"&gt;&lt;input type="radio" name="ethics1" value="definitely-1" id="definitely-1"&gt;&#160;Définitivement&lt;/label&gt;
						&lt;/div&gt;
					&lt;/fieldset&gt;
					&lt;fieldset class="subfields"&gt;
						&lt;legend&gt;&lt;span class="field-name"&gt;Exemple 2&lt;/span&gt;: Vous avez besoin d'un logiciel, mais vous ne pouvez pas attendre que la gestion prenne cette décision. Le téléchargeriez-vous sans avoir de licence?&lt;/legend&gt;
						&lt;div class="radio"&gt;
							&lt;label for="defNot-2"&gt;&lt;input type="radio" name="ethics2" value="defNot-2" id="defNot-2"&gt;&#160;Absolument pas&lt;/label&gt;&#160;
							&lt;label for="probNot-2"&gt;&lt;input type="radio" name="ethics2" value="probNot-2" id="probNot-2"&gt;&#160;Probablement pas&lt;/label&gt;&#160;
							&lt;label for="maybe-2"&gt;&lt;input type="radio" name="ethics2" value="maybe-2" id="maybe-2"&gt;&#160;Peut-être (Incertain)&lt;/label&gt;&#160;
							&lt;label for="probably-2"&gt;&lt;input type="radio" name="ethics2" value="probably-2" id="probably-2"&gt;&#160;Probablement&lt;/label&gt;&#160;
							&lt;label for="definitely-2"&gt;&lt;input type="radio" name="ethics2" value="definitely-2" id="definitely-2"&gt;&#160;Définitivement&lt;/label&gt;
						&lt;/div&gt;
					&lt;/fieldset&gt;
				&lt;/div&gt;
			&lt;/fieldset&gt;
			&lt;input type="submit" name="submit" value="Soumettre" class="btn btn-primary"&gt;
		&lt;/form&gt;
	&lt;/div&gt;
	&lt;/section&gt;
	</code></pre>
	</details>

	<noscript>
		<p>Les formulaires à étapes ne devraient pas être utilisés sans JavaScript. Dans ce cas, les formulaires seront convertis en formulaires statiques et seront dépendant de la validation côté client et serveur (qui ne font pas parties de la WET-BOEW).</p>
	</noscript>
</section>

<section>
	<h2 id="default-1">Exemple - Formulaire d'étapes avec option de quiz</h2>
	<div class="wb-frmvld wb-steps quiz">
	<form action="#" id="quiz-example">
		<fieldset>
			<legend>1. Quel est ton fruit préféré?</legend>
			<div>
				<p>Mon fruit préféré est:</p>
				<ul class="form-group list-unstyled">
					<li class="radio">
						<label for="apple-1"><input type="radio" name="fruit" id="apple-1" value="apple">Pomme</label>
					</li>
					<li class="radio">
						<label for="orange-1"><input type="radio" name="fruit" id="orange-1" value="orange">Orange</label>
					</li>
					<li class="radio">
						<label for="banana-1"><input type="radio" name="fruit" id="banana-1" value="banana">Banane</label>
					</li>
					<li class="radio">
						<label for="kiwi-1"><input type="radio" name="fruit" id="kiwi-1" value="Kiwi">Kiwi</label>
					</li>
				</ul>
			</div>
		</fieldset>
		<fieldset>
			<legend>2. Quel est ton animal de compagnie préféré?</legend>
			<div>
				<p>Mon animal préféré est:</p>
				<ul class="form-group list-unstyled">
					<li class="radio">
						<label for="dog-1"><input type="radio" name="animal" id="dog-1" value="dog">Chien</label>
					</li>
					<li class="radio">
						<label for="cat-1"><input type="radio" name="animal" id="cat-1" value="cat">Chat</label>
					</li>
					<li class="radio">
						<label for="bird-1"><input type="radio" name="animal" id="bird-1" value="bird">Oiseau</label>
					</li>
				</ul>
			</div>
		</fieldset>
		<fieldset>
			<legend>3. Condiments</legend>
			<div>
				<p>Choisissez vos condiments:</p>
				<ul class="form-group list-unstyled">
					<li class="checkbox">
						<label for="ketchup-1"><input type="checkbox" id="ketchup-1" value="ketchup" name="condiments">Ketchup</label>
					</li>
					<li class="checkbox">
						<label for="relish-1"><input type="checkbox" id="relish-1"  value="relish" name="condiments">Relish</label>
					</li>
					<li class="checkbox">
						<label for="mustard-1"><input type="checkbox" id="mustard-1"  value="mustard" name="condiments">Moutarde</label>
					</li>
				</ul>
			</div>
		</fieldset>
		<input type="submit" name="submit" value="Soumettre" class="btn btn-primary" />
	</form>
	</div>

	<details class="mrgn-tp-md mrgn-bttm-md">
		<summary>Visualiser le code</summary>
		<pre><code>&lt;section&gt;
	&lt;h2 id="default-1"&gt;Exemple - Formulaire d'étapes avec option de quiz&lt;/h2&gt;
	&lt;div class="wb-frmvld wb-steps quiz"&gt;
	&lt;form action="#" id="quiz-example"&gt;
		&lt;fieldset&gt;
			&lt;legend&gt;1. Quel est ton fruit préféré?&lt;/legend&gt;
			&lt;div&gt;
				&lt;p&gt;Mon fruit préféré est:&lt;/p&gt;
				&lt;ul class="form-group list-unstyled"&gt;
					&lt;li class="radio"&gt;
						&lt;label for="apple-1"&gt;&lt;input type="radio" name="fruit" id="apple-1" value="apple"&gt;Pomme&lt;/label&gt;
					&lt;/li&gt;
					&lt;li class="radio"&gt;
						&lt;label for="orange-1"&gt;&lt;input type="radio" name="fruit" id="orange-1" value="orange"&gt;Orange&lt;/label&gt;
					&lt;/li&gt;
					&lt;li class="radio"&gt;
						&lt;label for="banana-1"&gt;&lt;input type="radio" name="fruit" id="banana-1" value="banana"&gt;Banane&lt;/label&gt;
					&lt;/li&gt;
					&lt;li class="radio"&gt;
						&lt;label for="kiwi-1"&gt;&lt;input type="radio" name="fruit" id="kiwi-1" value="Kiwi"&gt;Kiwi&lt;/label&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;
		&lt;fieldset&gt;
			&lt;legend&gt;2. Quel est ton animal de compagnie préféré?&lt;/legend&gt;
			&lt;div&gt;
				&lt;p&gt;Mon animal préféré est:&lt;/p&gt;
				&lt;ul class="form-group list-unstyled"&gt;
					&lt;li class="radio"&gt;
						&lt;label for="dog-1"&gt;&lt;input type="radio" name="animal" id="dog-1" value="dog"&gt;Chien&lt;/label&gt;
					&lt;/li&gt;
					&lt;li class="radio"&gt;
						&lt;label for="cat-1"&gt;&lt;input type="radio" name="animal" id="cat-1" value="cat"&gt;Chat&lt;/label&gt;
					&lt;/li&gt;
					&lt;li class="radio"&gt;
						&lt;label for="bird-1"&gt;&lt;input type="radio" name="animal" id="bird-1" value="bird"&gt;Oiseau&lt;/label&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;
		&lt;fieldset&gt;
			&lt;legend&gt;3. Condiments&lt;/legend&gt;
			&lt;div&gt;
				&lt;p&gt;Choisissez vos condiments:&lt;/p&gt;
				&lt;ul class="form-group list-unstyled"&gt;
					&lt;li class="checkbox"&gt;
						&lt;label for="ketchup-1"&gt;&lt;input type="checkbox" id="ketchup-1" value="ketchup" name="condiments"&gt;Ketchup&lt;/label&gt;
					&lt;/li&gt;
					&lt;li class="checkbox"&gt;
						&lt;label for="relish-1"&gt;&lt;input type="checkbox" id="relish-1"  value="relish" name="condiments"&gt;Relish&lt;/label&gt;
					&lt;/li&gt;
					&lt;li class="checkbox"&gt;
						&lt;label for="mustard-1"&gt;&lt;input type="checkbox" id="mustard-1"  value="mustard" name="condiments"&gt;Moutarde&lt;/label&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;
		&lt;input type="submit" name="submit" value="Soumettre" class="btn btn-primary" /&gt;
	&lt;/form&gt;
	&lt;/div&gt;
&lt;/section&gt;
		</code></pre>
	</details>
</section>
